﻿<div class="layui-card" id="lg-vitaList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>简历列表</div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'招聘岗位',Options:options.Jobs}" v-model:value="where.JobId.Value"
                                val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-singletext :data="{Title:'姓名'}" v-model:value="where.Name.Value"
                                    val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item">
                <lg-form-idnumber :data="{Title:'证件号'}" v-model:value="where.IdNumber.Value"
                                  val-type="value"></lg-form-idnumber>
            </div>
            <div class="lg-search-item">
                <lg-form-phone :data="{Title:'手机'}" v-model:value="where.Phone.Value" val-type="value"></lg-form-phone>
            </div>
            <div class="lg-search-item">
                <lg-form-daterange :data="{Title:'日期',Name:'AddTime'}" v-model:value="where.DateRange.Value"
                                   val-type="value"></lg-form-daterange>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="OpenColMapControlPanel">
                        <i class="fa fa-cog fa-fw"></i>字段配置
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="exportExcel">
                        <i class="fa fa-file-excel-o fa-fw"></i>导出
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="exportResume" >
                        <i class="fa fa-file-excel-o fa-fw"></i>批量导出简历
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh">
                        <i class="fa fa-refresh fa-fw"></i>刷新
                    </button>
                    
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':applys.length>0&&checked.length==applys.length}]"
                                     lay-skin="primary">
                                    <i class="layui-icon layui-icon-ok"></i>
                                </div>
                            </th>
                            <th v-for="item in showCol" :style="{'width':item.Width?item.Width+'px':'auto'}">
                                {{item.Title}}
                            </th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in applys">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]"
                                     lay-skin="primary" v-on:click="onRowCheck(row)">
                                    <i class="layui-icon layui-icon-ok"></i>
                                </div>
                            </td>
                            <td v-for="column in showCol">{{FormatValue(column.Name,row[column.Name])}}</td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="查看求职详情"
                                   v-on:click="info(row)"><span class="fa fa-file-text fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除求职信息" v-on:click="remove(row)"
                                   v-if="row.IsDelete==0"><span class="fa fa-trash-o fa-fw"></span></a>
                                <a class="layui-btn layui-btn-xs" title="简历下载" v-on:click="Accept(row)"
                                   v-if="row.PassState!=1&&row.IsDelete==0"><span class="fa fa-download fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="applys.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading">
                        <img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" />
                        数据加载中...
                    </p>
                </div>
            </div>
            <!--分页-->
            <div id="pager" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div class="fieldWrap" id="colMapWrap" v-show="colmapState" style="position:relative;width:700px;">
        <div class="field-head">
            <div class="lg-form-item">
                <div class="lg-form-td name">字段名</div>
                <div class="lg-form-td">查看</div>
                <div class="lg-form-td">导出</div>
                <div class="lg-form-td">字段宽度</div>
                <div class="lg-form-td">排序（拖动）</div>
            </div>
        </div>
        <div class="field-body">
            <draggable :list="colmaps" handle=".drag" ghost-class="ghost" :force-fallback="true"
                       chosen-class="choseClass" animation="300" delay="2" item-key="1">
                <template #item="{ element }">
                    <div class="lg-form-item">
                        <div class="lg-form-td"><input type="text" class="name" v-model="element.Title" /></div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsShow}]"
                                 v-on:click="element.IsShow=!element.IsShow" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsExport}]"
                                 v-on:click=" element.IsExport = !element.IsExport" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td">
                            <input type="number" class="width" placeholder="宽度" v-model="element.Width" />
                        </div>
                        <div class="lg-form-td drag" title="调整顺序"><i class="fa fa-bars fa-fw"></i></div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="field-help">
            <p>*宽度不填写则默认宽度,可点击图标<i class="fa fa-bars fa-fw"></i>拖动位置顺序。</p>
        </div>
        <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':exportAll}]"
             v-on:click="onCheckAll('IsExport')" lay-skin="primary">
            <i class="layui-icon layui-icon-ok"></i><span>全部设为导出</span>
        </div>
        <div class="field-foot">
            <a href="javascript:;" class="layui-btn layui-btn-normal" v-on:click="saveColMaps(0)">保存设置</a>
            <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-danger"
               v-on:click="saveColMaps(1)">保存并关闭</a>
        </div>
    </div>
</div>

<script class="tempScript" type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js?v=1'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        IdNumbers:[],
                        colmaps: [],//接口传过来的所有字段列表
                        applys: [],
                        pager: {
                            Page: 1,
                            Limit: 10
                        },
                        // 配置查询条件
                        where: {
                            JobId: { Name: "JobId", Value: "" },
                            IdNumber: { Name: "IdNumber", Value: "" },
                            Phone: { Name: "Phone", Value: "" },
                            Name: { Name: "Name", Value: "", Key: "模糊匹配" },
                            DateRange: { Name: "DateRange", Value: "" },
                        },
                        checked: [],
                        options: {
                            IsDelete: [
                                {
                                    Text: "正常",
                                    Value: 0
                                },
                                {
                                    Text: "删除",
                                    Value: 1
                                }
                            ],
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                            Grades: [],
                            Jobs: [],
                        },
                        loading: false,
                        colmapState: false,
                        importAcceptState: false,
                    }
                },
                mounted: function () {
                    this.GetColMaps();
                    this.GetApplys();
                    this.getJobForOption();
                    
                },
                computed: {
                    showCol: function () {
                        return this.colmaps.filter(p => p.IsShow);
                    },
                    exportCol: function () {
                        return this.colmaps.filter(p => p.IsExport);
                    },
                    exportFiledCount: function () {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return "(" + checkCount + "/" + count + ")";
                    },
                    exportAll: function () {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return checkCount == count;
                    }
                },
                methods: {

                    //处理搜索按钮请求
                    GetApplys: function () {
                        //获取数据先开启loading加载事件
                        this.loading = true;
                        this.applys = [];
                        var where = this.formatWhere(true);
                        lg.request({
                            url: "/api/sys/recruit/GetVitaList",
                            method: "post",
                            //将数据转换成JSON格式
                            data: { where: JSON.stringify(where) },
                            success: res => {
                                if (res.code == 0) {
                                    this.applys = this.FormatData(res.data) || [];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    //搜索按钮绑定的事件
                    onSearch: function () {
                        this.pager.Page = "1";
                        this.GetApplys();
                    },
                    //判断where内每一项是否不为空，如果不为空做添加操作
                    //如果传入的值是true，多添加两项，最后导出
                    formatWhere: function (isPager) {
                        var where = [];
                        for (let key in this.where) {
                            if (this.where[key].Value != "") {
                                where.push(this.where[key])
                            }
                        }
                        if (isPager == true) {
                            where.push({ "Name": "Page", Value: this.pager.Page });
                            where.push({ "Name": "Limit", Value: this.pager.Limit })
                        }
                        return where;
                    },
                    //刷新按钮
                    refresh: function () {
                        this.GetApplys();
                    },
                    //分页
                    setPage: function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager'
                            , curr: that.pager.Page
                            , limit: that.pager.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.pager.Page = obj.curr;
                                    that.pager.Limit = obj.limit;
                                    that.GetApplys();
                                }
                            }
                        });
                    },
                    //导出Excel
                    exportExcel: function () {
                        var arry = this.colmaps.filter(p => p.IsExport);
                        var where = this.formatWhere();
                        if (arry.length > 0) {
                            this.exportbtn = false;
                            var obj = {};
                            for (let i in arry) {
                                obj[arry[i].Name] = arry[i].Title
                            }
                            lg.getFile({
                                url: "/api/sys/recruit/exportvita",
                                fileName: "招聘数据-" + lg.GetDate("yyyyMMddHHmmss"),
                                data: { where: JSON.stringify(where), cols: JSON.stringify(obj) }
                            })
                        } else {
                            layer.msg("请选择列后再执行导出！", { icon: 2 })
                        }
                    },
                    //批量导出求职简历
                    exportResume: function () {
                        var ids = this.checked.map(entry => entry.Id);
                        if(ids.length<1){
                            layer.msg("您没有选择任何行！",{icon:2});
                            return false;
                        }
                        lg.getFile({
                            url: "/api/sys/recruit/exportvitawords",
                            fileName: "简历-" + lg.GetDate("yyyyMMddHHmmss"),
                            data: {
                                ids: ids
                            }
                        })
                    },

                    //配置详情页地址并将ID带出
                    info: function (item) {
                        frame.NavigateTo({
                            url: "/lgm/recruit/vita/info/" + item.Id,
                            title: "招聘详情[" + item.Name + "]"
                        });
                    },
                    //删除功能
                    remove: function (item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确定继续执行？", function (box) {
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/recruit/deleteVita",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        that.refresh();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                    },
                    //判断是否被选中
                    isChecked: function (item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function (item) {            
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    //checked在data中已经定义了
                    onRowCheckAll: function () {
                        var b = this.checked.length == this.applys.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.applys) {
                                arry.push(this.applys[i]);
                            }
                            this.checked = arry;
                            
                        }
                    },
                    onCheckAll: function (attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    /*
                    发请求获取所有字段配置数据并赋值给colmaps
                    */
                    GetColMaps: function () {
                        lg.request({
                            url: " /api/sys/recruit/GetVitaColMaps",
                            success: res => {
                                if (res.code == 0) {
                                    this.colmaps = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    //字段设置保存功能
                    saveColMaps: function (isClosePanel) {
                        lg.request({
                            url: "/api/sys/recruit/SaveVitaColMaps",
                            method: "post",
                            data: { maps: JSON.stringify(this.colmaps) },
                            success: res => {
                                if (res.code == 0) {
                                    if (isClosePanel == 1) {
                                        layer.closeAll();
                                    }
                                    layer.msg("保存成功！", { icon: 1 });
                                }
                            }
                        })
                    },
                    //查询下拉条件
                    getJobForOption: function () {
                        lg.request({
                            url: "/api/sys/recruit/getJobList",
                            data: {
                                Page: 1,
                                Limit: 9999,
                            },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        var arry = [{ Text: '不限', Value: '' }];
                                        for (let i in res.data) {
                                            arry.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                        }
                                        this.options.Jobs = arry;
                                    } else {
                                        this.options.Jobs = [];
                                    }
                                }
                            }
                        })
                    },
                    //处理数据方法
                    FormatData: function (data) {
                        if (data) {
                            for (let i in data) {
                                var row = data[i];
                                var formData = lg.convert.toJson(row.FormData, null);
                                if (formData) {
                                    for (let key in formData) {
                                        var val = formData[key];
                                        if (val == 'lg-no-render') {
                                            val = "";
                                        }
                                        else {
                                            if (typeof val == "object") {
                                                val = val.Value || val.value;
                                            } else {
                                                var obj = lg.convert.toJson(val, null);
                                                if (obj) {
                                                    val = val = obj.Value || obj.value;
                                                }
                                            }
                                        }
                                        row[key] = val;
                                    }
                                }
                            }
                        }
                        return data;
                    },
                    //待修改（显示渲染的数据）
                    FormatValue: function (key, val) {
                        if (key == "PayState") {
                            switch (val) {
                                case 1:
                                    return "待支付";
                                case 2:
                                    return "已支付";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "PassState") {
                            switch (val) {
                                case 1:
                                    return "已录取";
                                case 2:
                                    return "未录取";
                                case 3:
                                    return "待定";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "Tuition") {
                            switch (val) {
                                case 1:
                                    return "待缴费";
                                case 2:
                                    return "预缴费";
                                case 3:
                                    return "已缴费";
                                case 4:
                                    return "申请退费";
                                case 5:
                                    return "已退费";
                                case 6:
                                    return "放弃缴费";
                                default:
                                    return "";
                            }
                        }
                        else {
                            return val;
                        }
                    },
                    OpenColMapControlPanel: function () {
                        this.colmapState = true;
                        layer.open({
                            type: 1,
                            title: "字段配置",
                            content: $("#colMapWrap")
                        })
                    },

                    //单个简历下载按钮功能
                    Accept: function (data) { 
                        console.log('单条数据',data)
                        var arry = this.colmaps.filter(p => p.IsExport);
                        var where = this.formatWhere();
                        if (arry.length > 0) {
                            this.exportbtn = false;
                            var obj = {};
                            for (let i in arry) {
                                obj[arry[i].Name] = arry[i].Title
                            }
                            lg.getFile({
                                url: "/api/sys/recruit/exportvitaword",
                                //fileName: "个人简历-" + lg.GetDate("yyyyMMddHHmmss"),
                                data: { 
                                  id:data.Id 
                                }
                            })
                        } else {
                            layer.msg("请选择列后再执行导出！", { icon: 2 })
                        }
                    },
                }
            })
            freeForm.regComponent(app);
            app.component('draggable', window.vuedraggable);
            this.vm = app.mount("#lg-vitaList");
        },
        methods: {
            reload: function () {
                this.vm.refresh();
            },
        }
    }).mount();
</script>